<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加警报条件"
    width="80%"
    :before-close="Cancel"
    :close-on-click-modal="false"
    style="width: 40%; height: 100%; float: right; margin: 0"
  >
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-position="top">
      <el-form-item label="设备选择">
        <el-select
          v-model="form.alertId"
          class="m-2"
          placeholder="请选择报警"
          style="width: 240px"
          @change="changeContact"
        >
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>

    <div v-if="contact" style="display: flex">
      <div style="flex: 2; display: flex; flex-direction: column">
        <div>姓名</div>
        <div style="flex: 1" v-for="(item, index) in contact.notificationContact" :key="index">
          <div style="flex: 1">{{ displayRuleText1(item) }}</div>
        </div>
      </div>
      <div style="flex: 5; display: flex">
        <div style="flex: 1" v-for="(item, index) in contact.communicationMethod" :key="index">
          <div>{{ displayRuleText(item) }}</div>
          <div
            v-for="(item, index) in contact.notificationContact"
            :key="index"
            style="margin-top: 2px"
          >
            开
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteAlert">删除</el-button>
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Sumbit">确 定</el-button>
        <!-- <el-button type="primary" plain size="mini" @click="aaa"
          ><el-icon><Plus /></el-icon> ddd
        </el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, onMounted, computed } from 'vue'
import Notification from '../../../MyJson/Notification.json'
import { v4 as uuidv4 } from 'uuid'

export default defineComponent({
  setup(_, { emit }) {
    // 计算页面 联系人
    const displayRuleText = computed(() => {
      return (judgeValue) => {
        const rule = Notification.find((item) => item.value === judgeValue)
        return rule ? rule.label : ''
      }
    })
    // 计算页面 联系人
    const displayRuleText1 = computed(() => {
      return (judgeValue) => {
        const rule = contactList.value.find((item) => item.id === judgeValue)
        return rule ? rule.contactName : ''
      }
    })
    // 计算页面 联系人
    const contactList = ref(null)
    // 页面数据
    const contact = ref(null)
    // 获取页面数据
    onMounted(() => {
      const res = window.api.listAlert()
      options.value = JSON.parse(res)
      const result = window.api.listContact()
      contactList.value = JSON.parse(result)
    })
    // 页面
    const dialogVisible = ref(false)
    // 页面 表单
    const form = ref({
      alertName: '',
      alertId: '',
      executionType: 'AUTO_SCHED_EXECUTION_TYPE_ALERT',
      Change: 'DeviceAlert',
      id: ''
    })
    // 页面 紧急联系人
    const options = ref([])
    const showDelete = ref(false)
    // 页面 提交表单
    const Sumbit = () => {
      const uuid = uuidv4()
      form.id = uuid
      emit('update', form.value)
      Cancel()
    }
    // 页面 取消
    const Cancel = () => {
      const uuid = uuidv4()
      dialogVisible.value = false
      form.value = {
        id: uuid,
        alertName: '',
        alertId: '',
        executionType: 'AUTO_SCHED_EXECUTION_TYPE_ALERT',
        Change: 'DeviceAlert'
      }
      contact.value = null
    }
    // 通讯方式选择
    const changeContact = () => {
      const res = window.api.getAlertById(form.value.alertId)
      contact.value = JSON.parse(res)
      form.value.alertName = contact.value.name
    }
    // 测试
    const aaa = () => {
      const res = window.api.listAlert()
    }
    // 删除
    const DeleteAlert = () => {
      emit('DeleteAlert')
      Cancel()
    }
    return {
      showDelete,
      dialogVisible,
      form,
      options,
      displayRuleText,
      displayRuleText1,
      contact,
      contactList,
      Sumbit,
      Cancel,
      changeContact,
      aaa,
      DeleteAlert
    }
  }
})
</script>

<style>
</style>